<template>
  <div class="street_town_box" id="street_town"></div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'StreetTown',
  data () {
    return {
      jdTitle: [],
      ljslrsValue: [],
      ljpgrsValue: [],
      ljxsrsValue: []
    }
  },
  mounted () {
    this.JdsjHandle()
  },
  methods: {
    JdsjHandle () {
      this.$http.post(this.$api.Jdsj.jdsj, ' ', true).then(result => {
        let arr = result.data.result
        for (const value of arr.values()) {
          this.jdTitle.push(value.jdMc)
          this.ljslrsValue.push(value.ljslrs)
          this.ljpgrsValue.push(value.ljpgrs)
          this.ljxsrsValue.push(value.ljxsrs)
        }
        this.charts(this.jdTitle, this.ljslrsValue, this.ljpgrsValue, this.ljxsrsValue)
      })
    },
    charts (arrX, arrY, arrY2, arrY3) {
      let myChart = echarts.init(document.getElementById('street_town'))
      myChart.setOption({
        title: {
          text: '各街镇受理评估统计',
          textStyle: {
            color: '#fff',
            fontSize: 30
          },
          top: '3%',
          left: '5%'
        },
        legend: {

          data: [
            {
              name: '累计受理人数',
              icon: 'roundRect',
              textStyle: {
                color: '#fff',
                fontSize: 24
              }
            },
            {
              name: '累计评估人数',
              icon: 'roundRect',
              textStyle: {
                color: '#fff',
                fontSize: 24
              }
            },
            {
              name: '当前享受人数',
              icon: 'roundRect',
              textStyle: {
                color: '#fff',
                fontSize: 24
              }
            }
          ]
        },
        grid: {
          left: '6%',
          right: '6%',
          top: '12%',
          bottom: '10%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          axisTick: {
            alignWithLabel: true
          },
          axisLine: {
            lineStyle: {
              color: '#00FFFF'
            }
          },
          axisLabel: {
            show: true,
            rotate: 50,
            textStyle: {
              color: '#ffffff', // 坐标字体颜色
              fontSize: 20
            }
          },
          itemStyle: {
            normal: {
              color: '#59f9fa'
            }
          },
          data: arrX
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#60707F' // y轴颜色
            }
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#60707F',
              fontSize: 20
            }
          },
          splitLine: {
            lineStyle: {
              color: '#60707F'
            }
          }
        },
        series: [
          {
            name: '累计受理人数',
            type: 'bar',
            stack: '',
            label: {
              normal: {
                show: false,
                position: 'insideRight'
              }
            },
            itemStyle: {
              normal: {
                color: '#72f6f8',
                fontSize: 14
              }
            },
            /* [3464, 2412, 4082, 4773, 3250, 822, 1480, 1979, 2304, 858,
            2225, 2301, 3550, 810, 4572, 2695, 2460, 2418, 473, 3391,
            3309, 2876, 4213, 3547, 2729, 1097, 17286, 1023, 3217, 1270,
            1920, 2982, 1279, 3316, 2920, 5436 ] */
            data: arrY
          },
          {
            name: '累计评估人数',
            type: 'bar',
            itemStyle: {
              normal: {
                color: '#2981d3',
                fontSize: 14
              }
            },
            stack: '',
            label: {
              normal: {
                show: false,
                position: 'insideRight'
              }
            },
            /* [ 2980, 2032, 2902, 4334, 2572, 617, 1254, 1518, 1700, 742,
            1876, 1861, 3203, 670, 3856, 2330, 2294, 1934, 425, 2889,
            2825, 2339, 3480, 2859, 2396, 1010, 17027, 946, 2467, 1195,
            1801, 2516, 1075, 2657, 2487, 3827 ] */
            data: arrY2
          },
          {
            name: '当前享受人数',
            type: 'bar',
            stack: '',
            label: {
              normal: {
                show: false,
                position: 'insideRight'
              }
            },
            itemStyle: {
              normal: {
                color: '#ffc24b',
                fontSize: 14
              }
            },
            /* [ 253, 70, 604, 461, 248, 25, 46, 120, 365, 113,
            157, 118, 193, 25, 117, 279, 933, 133, 3, 246,
            418, 190, 288, 210, 26, 75, 84, 174, 300, 37,
            38, 124, 39, 278, 565, 722 ] */
            data: arrY3
          }
        ],
        dataZoom: {
          show: true, // 为true 滚动条出现
          realtime: true,
          type: 'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
          height: 10, // 表示滚动条的高度，也就是粗细
          start: 10, // 表示默认展示20%～80%这一段。
          end: 80
        }
      })
    }
  }
}
</script>

<style scoped>
  .street_town_box {
    width: 98%;
    height: 90%;
    position: absolute;
    left: 1rem;
    top: 4rem;
  }
</style>
